<template>
    <el-dialog v-model="open" title="添加分组" width="500">
        <!-- model：当前表单要双向绑定的数据对象 -->
        <el-form :model="groupItem">
            <el-form-item label="分组名称">
                <el-input v-model="groupItem.name" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="open = false">取消</el-button>
                <el-button type="primary" @click="onConfirm">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const emit = defineEmits(['onAdd', 'onUpdate'])
// 控制弹窗的打开关闭状态
const open = ref(false);

// ref<类型>(数据)
const groupItem = ref<{ id?: string, name: string }>({ name: '' });

// 点击弹窗的【确认】按钮
const onConfirm = () => {
    if (groupItem.value.id) {
        onUpdate();
    } else {
        onAdd();
    }
}

const onAdd = () => {
    // 调用父组件的onAdd方法，并传值给父组件
    emit('onAdd', groupItem.value);
    // 关闭弹窗
    open.value = false;
    // 成功提示
    ElMessage({
        type: 'success',
        message: '添加成功',
    })
}
const onUpdate = () => {
    // 调用父组件的onUpdate方法，并传值给父组件
    emit('onUpdate', groupItem.value);
    // 关闭弹窗
    open.value = false;
    // 成功提示
    ElMessage({
        type: 'success',
        message: '修改成功',
    })
}

// 修改弹窗状态（打开弹窗）
const openDialog = (formItem: { id: string, name: string }) => {
    if (formItem) {
        // 进入if，说明formItem有值，则表示当前的操作是【修改】

        // 将要修改的分组对象formItem，赋值给当前表单双向绑定的对象groupItem
        groupItem.value = { ...formItem };
    } else {
        // 进入if，说明formItem有值，则表示当前的操作是【添加】
        groupItem.value = { name: '' };
    }

    open.value = true;
}

// 子组件将openDialog方法暴露给父组件
defineExpose({
    openDialog
})

</script>

<style scoped></style>